import { Circle24Filled, Desktop24Filled } from "@vicons/fluent";
import {
  NCard,
  NButton,
  NDivider,
  NSpace,
  NDataTable,
  DataTableColumns,
  NAvatar,
  NIcon,
} from "naive-ui";
import { Ref } from "vue";
import { getRandomColor } from "@/utils/index";
import { Song, data_ } from "./data";
import PageScroll from "@/components/pageScroll";
export default defineComponent({
  name: "Project",
  setup() {
    let router = useRouter();
    let data: Ref<Song[]> = ref(data_);
    const stateView: { [key: string]: any } = {
      values: {
        "1": "正在进行",
        "2": "已完成",
        "3": "已挂起",
      },
      colors: {
        "1": "#2080F0",
        "2": "#18A058",
        "3": "#F0A020",
      },
    };
    const createColumns = ({
      handlePDetail,
    }: {
      handlePDetail: (row: Song) => void;
    }): DataTableColumns<Song> => {
      return [
        {
          title: "项目名称",
          key: "project",
          render(row) {
            return h(
              NButton,
              {
                size: "small",
                text: true,
                onClick: () => {
                  handlePDetail(row);
                },
              },
              {
                icon: () =>
                  h(
                    NIcon,
                    {
                      color: "#FFD766",
                      size: 23,
                    },
                    {
                      default: () => h(Desktop24Filled),
                    }
                  ),
                default: () => {
                  return [
                    h("span", null, {
                      default: () => row.project,
                    }),
                  ];
                },
              }
            );
          },
        },
        {
          title: "状态",
          key: "state",
          width: 160,
          render(row) {
            return h(
              NButton,
              {
                size: "small",
                text: true,
                color: stateView.colors[row.state],
                style: {
                  cursor: "default",
                },
              },
              {
                icon: () =>
                  h(NIcon, null, {
                    default: () => h(Circle24Filled),
                  }),
                default: () =>
                  h("span", null, {
                    default: () => stateView.values[row.state],
                  }),
              }
            );
          },
        },
        {
          title: "项目",
          key: "tag",
          width: 160,
        },
        {
          title: "更新人",
          key: "person",
          width: 180,
          render(row) {
            return [
              h(
                NSpace,
                {
                  align: "center",
                },
                {
                  default: () => {
                    return [
                      h(
                        NAvatar,
                        {
                          round: true,
                          size: "small",
                          style: {
                            transform: "translate(0px, 3px)",
                          },
                        },
                        {
                          default: () => {
                            return h(
                              "span",
                              {
                                style: {
                                  color: getRandomColor(),
                                },
                              },
                              {
                                default: () => row.person.split("").pop(),
                              }
                            );
                          },
                        }
                      ),
                      h(
                        "span",
                        {
                          style: {
                            display: "inline-block",
                            transform: "translate(-6px, 0px)",
                          },
                        },
                        {
                          default: () => row.person,
                        }
                      ),
                    ];
                  },
                }
              ),
            ];
          },
        },
        {
          title: "更新时间",
          key: "time",
          width: 180,
          sorter: (row1, row2) =>
            new Date(row1.time).getTime() - new Date(row2.time).getTime(),
        },
      ];
    };

    const columns = createColumns({
      handlePDetail(row) {
        router.push({
          path: "/pdetail",
          query: {
            id: row.id,
          },
        });
      },
    });

    let filterAction: Ref<number> = ref(5);
    const handleFilter = (type: number) => {
      filterAction.value = type;
      if (type == 4) {
        let res = data_.filter((item: Song) => {
          return item.person == "Admin";
        });
        data.value = res;
      } else if (type == 5) {
        data.value = data_;
      } else {
        let res = data_.filter((item: Song) => {
          return item.state == type;
        });
        data.value = res;
      }
    };
    return () => (
      <div class=" h-full flex overflow-hidden">
        <PageScroll>
          <div class="sticky top-0 z-10 pl-3 pr-3">
            <NCard
              bordered={false}
              contentStyle={{
                display: "flex",
                justifyContent: "space-between",
                padding: "10px 0",
              }}
            >
              <NSpace align="center">
                <NButton
                  strong
                  size="small"
                  onClick={() => {
                    handleFilter(5);
                  }}
                  type={filterAction.value == 5 ? "primary" : "default"}
                >
                  全部
                </NButton>
                <NButton
                  strong
                  size="small"
                  onClick={() => {
                    handleFilter(4);
                  }}
                  type={filterAction.value == 4 ? "info" : "default"}
                >
                  我的项目
                </NButton>
                <NButton
                  strong
                  secondary
                  size="small"
                  onClick={() => {
                    handleFilter(1);
                  }}
                  type={filterAction.value == 1 ? "info" : "default"}
                >
                  正在进行
                </NButton>
                <NButton
                  strong
                  secondary
                  size="small"
                  onClick={() => {
                    handleFilter(2);
                  }}
                  type={filterAction.value == 2 ? "primary" : "default"}
                >
                  已完成
                </NButton>
                <NButton
                  strong
                  secondary
                  size="small"
                  onClick={() => {
                    handleFilter(3);
                  }}
                  type={filterAction.value == 3 ? "warning" : "default"}
                >
                  已挂起
                </NButton>
                <span class=" text-xs opacity-90">
                  {data.value.length}个项目
                </span>
              </NSpace>
              <NButton type="primary" size="small">
                新增项目
              </NButton>
            </NCard>
            <NDivider style="margin:0;" />
          </div>
          <div class="p-3">
            <NDataTable
              columns={columns}
              data={data.value}
              pagination={false}
            ></NDataTable>
          </div>
        </PageScroll>
      </div>
    );
  },
});
